<template>
  <el-card class="page-card">
    <div class="page-header">
      <h2>用户管理</h2>
      <el-input
        v-model="keyword"
        placeholder="用户名 / 手机 / 邮箱"
        size="small"
        clearable
        @keyup.enter="fetchList(1)"
        @clear="fetchList(1)"
        class="keyword-input"
      />
      <el-select
        v-model="statusFilter"
        placeholder="状态"
        size="small"
        clearable
        @change="fetchList(1)"
        class="status-select"
      >
        <el-option :value="undefined" label="全部" />
        <el-option :value="1" label="启用" />
        <el-option :value="0" label="禁用" />
      </el-select>
      <el-button
        type="primary"
        size="small"
        @click="fetchList(1)"
        class="search-btn"
      >搜索</el-button>
    </div>

    <div class="table-container">
      <el-table :data="list" border stripe style="width: 100%">
        <el-table-column prop="id" label="用户ID" width="90" />
        <el-table-column prop="username" label="用户名"  />
        <el-table-column prop="mobile" label="手机号"  />
        <el-table-column prop="email" label="邮箱"  />
        <el-table-column prop="userType" label="类型" >
          <template #default="{ row }">
            {{ Number(row.userType) === 2 ? '商家' : '普通' }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" >
          <template #default="{ row }">
            <el-tag type="success" v-if="Number(row.status) === 1">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="注册时间"  />
        <el-table-column label="操作" >
          <template #default="{ row }">
            <el-button
              size="small"
              type="danger"
              v-if="Number(row.status) === 1"
              @click="disable(row)"
            >禁用</el-button>
            <el-button
              size="small"
              type="success"
              v-else
              @click="enable(row)"
            >启用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUsers, disableUser, enableUser } from '@/api/admin'

// 分页相关（后端 PageDTO：list / total / currentPage / pageSize）
const list         = ref([])
const total        = ref(0)
const currentPage  = ref(1)
const pageSize     = ref(10)

// 过滤条件
const statusFilter = ref(undefined)
const keyword      = ref('')

// 拉取数据
function fetchList(page = currentPage.value) {
  currentPage.value = page
  getUsers(currentPage.value, pageSize.value, statusFilter.value, keyword.value)
    .then(res => {
      const data = res.data.data
      list.value        = Array.isArray(data.list) ? data.list : []
      total.value       = data.list.length
      currentPage.value = data.currentPage ?? currentPage.value
      pageSize.value    = data.pageSize ?? pageSize.value
    })
    .catch(() => ElMessage.error('获取用户列表失败'))
}

function handlePageChange(page) {
  fetchList(page)
}

function handleSizeChange(size) {
  pageSize.value = size
  fetchList(1)
}

// 启用/禁用
function enable(row) {
  ElMessageBox.confirm('确认启用该用户吗？', '提示', { type: 'info' })
    .then(() => enableUser(row.id))
    .then(() => {
      ElMessage.success('已启用')
      row.status = 1
    })
    .catch(() => {})
}

function disable(row) {
  ElMessageBox.confirm('确认禁用该用户吗？禁用后不可登录。', '警告', { type: 'warning' })
    .then(() => disableUser(row.id))
    .then(() => {
      ElMessage.success('已禁用')
      row.status = 0
    })
    .catch(() => {})
}

onMounted(() => fetchList())
</script>

<style scoped>
.page-card {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.keyword-input {
  width: 240px;
  margin-left: 16px;
}
.status-select {
  width: 120px;
  margin-left: 16px;
}
.search-btn {
  margin-left: 16px;
}
.table-container {
  flex: 1;
  overflow: auto;
  margin-top: 12px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
